<template>
  <div class="login-container">
    <div class="img">
      <img
        src="~/assets/img/login.png"
        alt="login" />
    </div>
    <div
      v-loading="loading"
      class="login-box">
      <el-form
        class="w-[300px]"
        ref="loginFormRef"
        :model="loginForm"
        :rules="loginRules"
        size="large">
        <el-form-item prop="username">
          <el-input
            v-model="loginForm.username"
            clearable />
        </el-form-item>

        <el-form-item prop="password">
          <el-input
            v-model="loginForm.password"
            clearable
            show-password />
        </el-form-item>

        <el-button
          class="w-full mt-4"
          size="default"
          type="primary"
          :loading="loading"
          @click="onLogin(loginFormRef)">
          登录/注册
        </el-button>
      </el-form>
    </div>
  </div>
</template>
<script setup lang="ts">
import type { FormInstance } from 'element-plus'
import type { User } from 'leancloud-storage'
import { Md5 } from 'ts-md5'
const loginFormRef = ref<FormInstance>()
definePageMeta({
  layout: false
})
useHead({
  title: '登录'
})
const loginForm = reactive({
  username: 'Jason',
  password: 'As123456'
})
const loading = ref(false)
const { $lc, $alert } = useNuxtApp()
const onLogin = (formEl: FormInstance | undefined) => {
  loading.value = true
  if (!formEl) return
  formEl
    .validate((valid, fields) => {
      if (valid) {
        let { username, password } = loginForm
        login(username, Md5.hashStr(password))
      } else {
        loading.value = false
      }
    })
    .finally(() => {
      loading.value = false
    })
}

const login = (username: string, password: string) => {
  console.log({ username, password })
  $lc
    .login(username, password)
    .then((res) => {
      loginSuccess(res)
    })
    .catch((err) => {
      if (err.message.includes('Could not find user')) {
        $lc
          .regist(username, password)
          .then((res) => {
            loginSuccess(res)
          })
          .catch((err) => {
            console.log(err)
          })
      } else {
        $alert('用户名密码不匹配')
      }
    })
}
const loginSuccess = (user: User) => {
  let backUrl = useBackUrl()
  let userinfo = useUser()
  userinfo.value = user.toJSON()
  navigateTo(backUrl.value || '/', { redirectCode: 301 })
}
</script>
<style>
.login-container {
  display: flex;
  max-width: 100%;
  width: 100vw;
  height: 100vh;

  gap: 2rem;
}

.img {
  display: flex;
  align-items: center;
  flex: 1;
  justify-content: flex-end;
}

.img img {
  width: 500px;
}

.login-box {
  display: flex;
  overflow: hidden;
  align-items: center;
  flex: 1;
  text-align: center;
}

@media screen and (max-width: 1180px) {
  .login-container {
    grid-gap: 9rem;
  }

  .img img {
    width: 360px;
  }
}

@media screen and (max-width: 968px) {
  .img {
    display: none;
  }
}
</style>
